<template>
  <div class="about">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <h1>This is an about page</h1>
    <VButton>Default</VButton>
    <v-button type="primary">Primary</v-button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <br /><br />
    <Button type="info">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
    <Carousel
      ref="carousel"
      :list-data="bannerData"
      :autoPlayTime="5000"
      :showIndicator="false"
      style="height: 400px"
    >
      <template slot-scope="{ record, index }">
        <div class="list-item">
          <img :src="record" :alt="index" />
        </div>
      </template>
    </Carousel>
    <div class="control">
      <button @click="prev">上一个</button>
      <button style="margin-left: 8px" @click="next">下一个</button>
    </div>
  </div>
</template>

<script>
// ./ ../ @/
import { Carousel } from "@digi1874/vue-carousel";
import "@digi1874/vue-carousel/dist/carousel.css";
import logo from "../assets/logo.png";
import wbb from "../assets/wbb.jpeg";
import lyf from "../assets/lyf.webp";
import hangyao from "../assets/huangyao.jpg";

export default {
  data() {
    return {
      bannerData: [logo, wbb, lyf, hangyao],
    };
  },
  components: {
    Carousel,
  },
  methods: {
    prev() {
      this.$refs.carousel.prev();
    },
    next() {
      this.$refs.carousel.next();
    },
  },
};
</script>

<style scoped>
.list-item {
  height: 400px;
  width: 600px;
}

.list-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #fff;
}
</style>
